﻿<!DOCTYPE HTML>
<html>
    <head>
       <title>Preferences</title>
        <link href="settings.css" rel="stylesheet" />
        <script src="settings.js"></script>
    </head>
    <body>
        <div id="preferences-template" data-win-control="WinJS.Binding.Template">
            <div class="settings-data-container">
                <div data-win-bind="innerText: name"></div>
            </div>
        </div>
        <div id="preferences" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Preferences Settings flyout" 
             data-win-options="{settingsCommandId:'preferences', width:'narrow'}">
            <div class="win-ui-dark win-header" style="background-color:#0887A7"> 
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label"  data-win-res="{textContent:'PreferencesTitle'}"></div>
                <img src="/images/smalllogo.png" style="position: absolute; right: 40px;"/>
            </div>
            <div class="win-content">
                <div class="win-settings-section">
                    <div id="preferencesDiv">
                        <h3 data-win-res="{textContent:'MyCurrencyTag'}"></h3>
                        <select id="settingsBaseCurrencySelect" class="settingsUserContent">
                        </select>
                        <h3 data-win-res="{textContent:'CrossRateListTitle'}"></h3>
                        <p  data-win-res="{textContent:'CrossRateListParagraph'}"></p>
                        <select id="settingsCrossRateSelect" class="settingsUserContent">
                        </select>
                        <button id="settingsAdd" class="currencyButton" data-win-res="{textContent:'PreferencesAddToListButton'}"></button>
                        <button id="settingsDelete" class="currencyButton" data-win-res="{textContent:'PreferencesDeleteSelectedButton'}"></button>
                        <div id="preferences-list" data-win-control="WinJS.UI.ListView" data-win-options="{
                            itemTemplate:select('#preferences-template'),
                            itemDataSource:Currency.Settings.ViewModels.codeList.dataSource,
                            tapBehavior : 'directSelect',
                            layout:{
                                        type: WinJS.UI.ListLayout
                                    }
                            }">
                        </div> 
                        <button id="settingsSave" class="currencyButton"  data-win-res="{textContent:'PreferencesSaveButton'}"></button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>